import React from 'react';
import { Card, message } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import Search from './components/Search';
import ExportButton from '@/components/ExportButton';
import {flowBorrowTrend, flowBorrowTrendExport} from '@/services/Flow';
import { Area } from '@ant-design/charts';
import config from './config';

class BorrowTrend extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      params: {},
      areaConfig: { ...config }
    }
  }

  /* 监听查询事件 */
  onSearch = (data) => {
    const params = this.state.params;
    this.setState({params: {...params, ...data}});
    this.getFlowBorrow();
  }

  /* 刷新事件 */
  onReload = () => {
    this.setState({params: {}});
    this.getFlowBorrow();
  }

  /* 获取展示数据 */
  getFlowBorrow = async () => {
    try {
      const params = this.state.params;
      const areaConfig = this.state.areaConfig;
      const res = await flowBorrowTrend(params);
      res.length === 0 ? message.warning('暂无相关数据！') : null;
      areaConfig.data = res;
      this.setState({ areaConfig });
    } catch (e) {
      console.error(e);
    }
  }

  componentDidMount() {
    this.getFlowBorrow()
  }

  render() {
    const {onSearch, onReload} = this;
    const {params, areaConfig} = this.state;
    return (
      <PageContainer>
        <Card
          title='借阅趋势'
          bodyStyle={{paddingBottom: 0, paddingTop: 30}}
          bordered={false}>
          <Search search={onSearch} reset={onReload} />
          <ExportButton query={params} request={flowBorrowTrendExport} />
          <Area style={{ paddingTop: 30, paddingBottom: 30 }} {...areaConfig} />
        </Card>
      </PageContainer>
    );
  }
}

export default BorrowTrend;
